<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <button @click="redirectToAbout">跳转about</button>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  components: {
    HelloWorld
  },
  methods: {
    redirectToAbout () {
      // 通过name跳转
      this.$router.push('/about')


      // 查询参数多个参数
      // this.$router.push({
      //   path: '/about',
      //   query: {
      //     msg: '123'
      //   }
      // })

      // 动态路由传参
      // this.$router.push({
      //   path: '/about/${this.inputValue}'
      // })


      // 查询参数多个参数
      // this.$router.push({
      //   name: 'about',
      //   params: {
      //     msg: '123'
      //   }
      // })

      // 动态路由传参
      // this.$router.push({
      //   name: 'about',
      //   params: {
      //     msg: '123'
      // }
      // })
    }
  }
}
</script>
